import React, { ChangeEventHandler, useContext, useEffect, useRef, useState } from "react";
import { Container, FormGroup, Form, Button, Row, Col} from "react-bootstrap";
import utils from '../../../utils'
import StringUtil from "../../../utils/stringutil";
import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
import UserService from "../../../services/userservice";
import md5 from "md5";
import PopupDialog from "../../../components/common/PopupDialog";
import eventEmitter from "../../../utils/EventEmitter";
import constants from "../../../constants";
import "./commonStyle.css";
import { UserHelper } from "../../../helper";
import AuthenticationContext from "../../../context/Context";

const Login:React.FC = ()=> {


    const [username,setUsername] = useState<string|null>(null);
    const [password,setPassword] = useState<string|null>(null);
    const {afterLogin} = useContext(AuthenticationContext);
    const alertRef = useRef<any>();
    const navigate = useNavigate();
    const {state} = useLocation();
    
    const stringutil = utils.str;

    useEffect(()=>{
        eventEmitter.dispatch(constants.str.hideTopContent);
    },[])

    const login = ()=>{
        if(stringutil.isNullOrEmpty(username)){
            PopupDialog.showBSPopup({message:"username can not be null"});
            return;
        }
        if(StringUtil.isNullOrEmpty(password)){
            PopupDialog.showBSPopup({message:"password can not be null"});
            return;
        }
        const pwdmd5 = md5(password!);
        UserService.login({
            'username':username!,
            "password":pwdmd5
        }).then((resp:any)=>{
            console.debug("login success: "+ JSON.stringify(resp));
            UserHelper.updateCachedUserInfo(username!,resp.content);
            afterLogin();
            //goback
            navigate("/")
        }).catch((err)=>{
            // alert(JSON.stringify(err||{}));
            PopupDialog.showBSPopup({message:err.message});
        })
    }

    const onChangeUsername = (e:any)=> {
        setUsername(e.target.value);
    }

    const onChangePassword = (e:any)=> {
        setPassword(e.target.value);
    }

    return (<Container fluid className="d-flex flex-column fullscreen justify-content-center">
    <Form className="m-2 p-5">
        <FormGroup className="mb-3">
            <Form.Label htmlFor="usename">UserName</Form.Label>
            <Form.Control id="usename" type="input" autoComplete={"off"} onChange={onChangeUsername}/>
        </FormGroup>
        <FormGroup className="mb-3">
            <Form.Label htmlFor="pwd">Password</Form.Label>
            <Form.Control id="pwd" type="password" autoComplete={"off"} onChange={onChangePassword}/>
        </FormGroup>
        <FormGroup className="mb-5 d-flex flex-row-reverse">
            <Link className="text-end" to="/user/register">Do not have account yet?</Link>
        </FormGroup>
        <Container className="d-flex justify-content-center">
            <Button style={{width:"50vw"}} className="align-self-center" onClick={login}>Login</Button>
        </Container>
    </Form>
</Container>)


    // return (<Container fluid className="d-flex flex-column fullscreen">
    //     <Form>
    //         <FormGroup as={Row} className="mb-3">
    //             <Form.Label column sm={2} className="text-end">UserName</Form.Label>
    //             <Col sm={10}>
    //                 <Form.Control type="input" onChange={onChangeUsername}/>
    //             </Col>
    //         </FormGroup>
    //         <FormGroup as={Row} className="mb-3">
    //             <Form.Label column sm={2} className="text-end">Password</Form.Label>
    //             <Col sm={10}>
    //                 <Form.Control type="input" onChange={onChangePassword}/>
    //             </Col>
    //         </FormGroup>
    //         <FormGroup as={Row} className="mb-5 d-flex flex-row-reverse">
    //             <Link className="text-end" to="/user/register">Do not have account yet?</Link>
    //         </FormGroup>
    //         <Container className="d-flex justify-content-center">
    //             <Button style={{width:"50vw"}} className="align-self-center" onClick={login}>Login</Button>
    //         </Container>
    //     </Form>
    // </Container>)
}

export default Login;